<template>
  <div class="main-container">
    <div class="layout">
      <div class="user_info" v-if="user">
        <img :src="user.avatar" alt="" class="avatar">
        <div class="name">{{ user.username }}</div>
      </div>
      <div class="link" :class="active == 'message' ? 'active' : ''" @click="router('message')">
        <img src="@/assets/image/1_2.png" alt="" v-if="active == 'message'">
        <img src="@/assets/image/1_1.png" alt="" v-else>
        <span v-if="active == 'message'">{{ $t('msg.聊天') }}</span>
      </div>

      <div class="link" :class="active == 'contacts' ? 'active' : ''" @click="router('contacts')">
        <img src="@/assets/image/2_2.png" alt="" v-if="active == 'contacts'">
        <img src="@/assets/image/2_1.png" alt="" v-else>
        <span v-if="active == 'contacts'">{{ $t('msg.通讯录') }}</span>
      </div>
      <div class="link" :class="active == 'mall' ? 'active' : ''" @click="router('mall')">
        <img src="@/assets/image/3_2.png" alt="" v-if="active == 'mall'">
        <img src="@/assets/image/3_1.png" alt="" v-else>
        <span v-if="active == 'mall'">{{ $t('mall.商城') }}</span>
      </div>
      <div class="link" :class="active == 'my' ? 'active' : ''" @click="router('my')">
        <img src="@/assets/image/4_2.png" alt="" v-if="active == 'my'">
        <img src="@/assets/image/4_1.png" alt="" v-else>
        <span v-if="active == 'my'">{{ $t('my') }}</span>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "home",
  data() {
    return {
      active: ''
    };
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  watch: {
    '$route'(to, from) {
      const matchedRoutes = to.matched;
      if (matchedRoutes.length > 1) this.active = matchedRoutes[1].name;
    }
  },

  // $route.matched
  created() {
    const matchedRoutes = this.$route.matched;
    if (!matchedRoutes.length) return;
    this.active = matchedRoutes[1].name;
  },
  methods: {
    router(value) {
      const matchedRoutes = this.$route.matched;
      if (!matchedRoutes.length) return;
      let name = matchedRoutes[1].name;
      if (value == name) return;
      // if (value === this.$route.name) return;
      // if (this.active === value) return;
      this.active = value;
      this.$router.replace({
        name: value
      })
    }
  }
};
</script>

<style scoped lang="scss">
.main-container {
  display: flex;
  width: 100%;
  height: 100vh;
}

.layout {
  width: 162px;
  height: 100vh;
  padding: 34px 0 0 20px;
  box-sizing: border-box;
  background: #F2F7FF;
  border-radius: 0px 0px 0px 0px;

  .user_info {
    padding-bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .avatar {
      width: 62px;
      height: 62px;
      border-radius: 11px;
    }

    .name {
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #333333;
      padding: 8px 10px 0;
      box-sizing: border-box;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.link {
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 32px;
    height: 32px;
  }

  span {
    color: #2273FF;
    font-size: 20px;
    margin-left: 6px;
  }

  &.active {
    background: #FCFCFE;
  }
}

.chat-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>

<style lang="scss">
.page_view {
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>